<template>
    <div>
        <div class="front-header">
            <div class="front-header-left" style="min-width: 150px">
                <img src="" >
                <div class="title" style="color: #4782fa">云隙论坛</div>
            </div>
            <div class="front-header-center">
                <div style="width: 360px;">
                    <el-menu :default-active="$route.path" mode="horizontal" router>
                        <el-menu-item index="/front">首页</el-menu-item>
                        <el-menu-item index="/front/question">提问</el-menu-item>
                        <el-menu-item index="/front/answer">回答</el-menu-item>
                        <el-menu-item index="/front/person">个人中心</el-menu-item>
                        <el-menu-item index="/front/ai">AI</el-menu-item>
                    </el-menu>
                </div>
            </div>

          <div style="display: flex; align-items: center; gap: 10px; margin-right: 200px">
            <!-- 缺少一个v-model -->
            <el-input style="width: 300px; margin-right: 10px" placeholder="请输入关键字搜索" clearable></el-input>
            <!--                <el-button type="success" @click="goSearch">搜 索</el-button>-->
            <el-button type="primary" style="width: 100px" round>搜 索</el-button>
          </div>

          <div class="front-header-right" style="color: #481497;">

            <div v-if="!isLoggedIn">
              <el-button @click="$router.push('/login')">登录</el-button>
              <el-button @click="$router.push('/register')">注册</el-button>
            </div>
            <div v-else class="user-info">
              <el-avatar :size="40" :src="profile.avatarUrl"></el-avatar>
              <span class="user-id" style="cursor:pointer" @click="$router.push('/front/person')">{{ profile.username }}</span>
              <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="main-body">
            <router-view :key="$route.fullPath" />
        </div>
    </div>
</template>
<script>
export default {
    name: 'Front',
    data(){
        return{
          isLoggedIn: true,
          userAvatar: 'https://azrael-first.oss-cn-shanghai.aliyuncs.com/1.jpg',
          userId: 'AzraelKaxi',

          profile: {
            username: "AzraelKaxi",
            avatarUrl: "https://azrael-first.oss-cn-shanghai.aliyuncs.com/1.jpg",
          },
        }
    },
  methods: {
    checkLoginStatus() {
      // Simulating an API call or checking local storage
      // Replace this with your actual login check logic
      const storedUser = localStorage.getItem('user');
      if (storedUser) {
        const user = JSON.parse(storedUser);
        this.isLoggedIn = true;
        this.userAvatar = ''; // Default avatar
        this.userId = user.id;
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'profile':
          this.$router.push('/front/person');
          break;
        case 'logout':
          this.logout();
          break;
      }
    },
    logout() {
      // Implement logout logic here
      // For example:
      localStorage.removeItem('user');
      this.isLoggedIn = false;
      this.$router.push('/');
    },
    getData() {
      let url = `/api/user/user-user`;
      this.$http
          .get(url, { headers: { token: this.token } })
          .then((response) => {
            if (response.data.code === 20000) {
              this.profile.username = response.data.data.uname;
              this.profile.avatarUrl = response.data.data.uhead;
            } else {
              if (response.data.code === 40100) {
                this.$router.push("/login");
              }
              this.$message.error("请登录");
            }
          })
          .catch((error) => {
            this.$message.error("获取信息失败：" + error.message);
          });
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    }
    // Simulating a check for user login status
    // In a real application, you would typically check this from your Vuex store or a auth service
    this.checkLoginStatus();
    this.getData();
  },
}
</script>

<style scoped>
  @import "../assets/css/front.css";

  .front-header-right {
    display: flex;
    align-items: center;
  }

  .user-info {
    display: flex;
    align-items: center;
  }

  .user-id {
    margin: 0 10px;
    font-weight: bold;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>